<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-tabs v-model="activeName">
        <el-tab-pane label="员工管理" name="first">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click="showDialog = true"
            v-if="checkPoint('POINT-ROLE-ADD')"
          >
            新增角色
          </el-button>
          <el-table :data="list" style="width: 90%" border>
            <el-table-column type="index" label="序号" width="180">
            </el-table-column>
            <el-table-column prop="name" label="角色名" width="180">
            </el-table-column>
            <el-table-column prop="description" label="描述"> </el-table-column>
            <el-table-column label="操作" width="240" align="center">
              <template class="set" slot-scope="{ row }">
                <el-button
                  type="primary"
                  size="mini"
                  @click="doPermission(row.id)"
                  v-if="checkPoint('POINT-ROLE-ASSIGN')"
                  >分配权限</el-button
                >
                <el-button
                  type="warning"
                  size="mini"
                  @click="doEdit(row.id)"
                  v-if="checkPoint('POINT-ROLE-EDIT')"
                >
                  修改
                </el-button>
                <el-button
                  type="danger"
                  size="mini"
                  @click="delRole(row.id)"
                  v-if="checkPoint('POINT-ROLE-DELETE')"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page.sync="pageInfo.page"
            :page-size="pageInfo.pagesize"
            layout="total, prev, pager, next"
            :total="pageInfo.total"
            @current-change="getRoleLists"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="公司信息" name="second">
          <el-form
            label-width="80px"
            style="width: 40%"
            :model="companyForm"
            disabled
          >
            <el-form-item label="企业名称:">
              <el-input v-model="companyForm.name"> </el-input>
            </el-form-item>
            <el-form-item label="公司地址:">
              <el-input v-model="companyForm.companyAddress"></el-input>
            </el-form-item>
            <el-form-item label="公司电话:">
              <el-input v-model="companyForm.companyPhone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱:">
              <el-input v-model="companyForm.mailbox"></el-input>
            </el-form-item>
            <el-form-item label="备注:">
              <el-input v-model="companyForm.remarks"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- Form -->
    <el-dialog :title="title" :visible.sync="showDialog" @close="btnCancel">
      <el-form :model="addForm" ref="addForm" :rules="rules">
        <el-form-item label="角色名称 :" label-width="100px" prop="name">
          <el-input v-model="addForm.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="角色描述 :" label-width="100px" prop="description">
          <el-input v-model="addForm.description" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="btnCancel">取 消</el-button>
        <el-button type="primary" @click="btnEnter">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog
      title="分配权限"
      :visible.sync="showPermDialog"
      style="width: 50%; margin: auto"
    >
      <!-- <el-tree
        :data="treeData"  //绑定的数据
        show-checkbox   //布尔类型的值,为true代表前面有勾选框
        node-key="id"   //每个节点的key,有个getCheckedKeys这个方法可以获得里面的所有node-key
        default-expand-all    //默认展开所有节点
        :default-checked-keys="checkedKeys"    //设置默认选中的节点
        :props="defaultProps"   //指定显示的文本用什么属性,指定子节点用什么属性
      > -->
      <el-tree
        :data="treeData"
        check-strictly
        show-checkbox
        node-key="id"
        default-expand-all
        :default-checked-keys="checkedKeys"
        :props="defaultProps"
        ref="tree"
      >
      </el-tree>
      <el-row type="flex" justify="center" style="margin-top: 20px">
        <el-button size="small" @click="assignPermission" type="primary">
          确定
        </el-button>
        <el-button size="small" @click="cancel">取消</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import {
  getRoleLists,
  delRole,
  addRole,
  editRole,
  getRole,
  getCompany,
  assignPermission,
} from "@/api/setting";
// 导入树状结构封装函数
import { getTree } from "@/utils";

import { mapGetters } from "vuex";

// 导入权限列表
import { getPermissionList } from "@/api/permisssion";

export default {
  data() {
    return {
      // 树状结构的
      currentId: "",
      // 默认选中数组
      checkedKeys: [],
      treeData: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      showPermDialog: false,

      // 设置的数据
      activeName: "first",
      addForm: {},
      companyForm: {},
      showDialog: false,
      list: [],
      pageInfo: {
        page: 1,
        pagesize: 5,
        total: 0,
      },
      rules: {
        name: [{ required: true, message: "角色名不能为空", trigger: "blur" }],
        description: [
          { required: true, message: "角色描述不能为空", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getRoleLists();
    this.getCompanyInfo();
  },
  computed: {
    title() {
      return this.addForm.id ? "修改员工信息" : "新建员工信息";
    },
    ...mapGetters(["userInfo"]),
  },
  methods: {
    // 分配权限的确定事件
    async assignPermission() {
      // getCheckedKeys是组件自带的方法,不能随意命名
      let ids = this.$refs.tree.getCheckedKeys();
      console.log(ids);
      // 修改权限点,传入当前id和其拥有的权限id
      await assignPermission({
        id: this.currentId,
        permIds: ids,
      });
      this.$message.success("分配权限点成功!");
      this.showPermDialog = false;
    },
    // 显示分配权限
    async doPermission(id) {
      this.currentId = id;
      // 获取权限点
      let res = await getPermissionList();
      // console.log(res);
      // 转换成树状结构
      this.treeData = getTree(res.data, "0");
      // 根据id获得角色详情
      let res2 = await getRole(id);
      // 获取默认选中的id
      this.checkedKeys = res2.data.permIds;
      // console.log(res2);
      this.showPermDialog = true;
    },
    // 取消按钮的点击事件
    cancel() {
      this.showPermDialog = false;
      this.treeData = [];
      this.checkedKeys = [];
    },

    async getRoleLists() {
      let res = await getRoleLists(this.pageInfo);
      // console.log(res);
      this.pageInfo.total = res.data.total;
      this.list = res.data.rows;
    },
    async delRole(id) {
      try {
        await this.$confirm("确定要删除吗?");
        await delRole(id);
        this.getRoleLists();
        this.$message.success("删除成功!");
      } catch (error) {
        this.$message.info("取消删除");
      }
    },
    async btnEnter() {
      this.$refs.addForm.validate(async (v) => {
        if (v) {
          if (this.addForm.id) {
            await editRole(this.addForm);
          } else {
            await addRole(this.addForm);
          }
          this.getRoleLists();
          this.$message.success(this.title + "成功!");
          this.showDialog = false;
        }
      });
    },
    btnCancel() {
      this.addForm = {};
      this.$refs.addForm.resetFields();
      this.showDialog = false;
    },
    async doEdit(id) {
      let res = await getRole(id);
      console.log(res);
      this.addForm = res.data;
      this.showDialog = true;
    },
    async getCompanyInfo() {
      let res = await getCompany(this.addForm.id);
      // console.log(res);
      this.companyForm = res.data;
    },
  },
};
</script>

<style>
.el-tab-pane > .el-button {
  margin-left: 65px;
  margin-top: 50px;
}
.el-table {
  margin: 10px auto;
}
.el-table .set a {
  font-size: 14px;
  color: blue;
  margin-right: 10px;
}
.el-pagination {
  float: right;
  margin-right: 65px;
}
.el-form {
  margin-top: 50px;
  margin-left: 70px;
}
.el-dialog .el-form-item {
  margin-right: 60px;
}
</style>